<template>
  <div class="menu-container">
    <div class="menu-header">
      <h2>菜单列表</h2>
      <div class="header-actions">
        <span class="menu-count">共 {{ menuTree.length }} 个菜单</span>
        <button class="add-btn" @click="showAddForm = true">添加菜单</button>
      </div>
    </div>

    <!-- 添加菜单表单 -->
    <div class="add-form-container" v-if="showAddForm">
      <div class="add-form">
        <h3>添加新菜单</h3>
        <div class="form-group">
          <label>菜单名称:</label>
          <input type="text" v-model="newMenu.menuName" placeholder="请输入菜单名称">
        </div>
        <div class="form-group">
          <label>菜单地址:</label>
          <input type="text" v-model="newMenu.menuUrl" placeholder="请输入菜单地址">
        </div>
        <div class="form-group">
          <label>菜单图标:</label>
          <input type="text" v-model="newMenu.menuIcon" placeholder="请输入菜单图标">
        </div>
        <div class="form-actions">
          <button class="cancel-btn" @click="showAddForm = false">取消</button>
          <button class="submit-btn" @click="addMenu">提交</button>
        </div>
      </div>
    </div>

    <!-- 编辑菜单表单 -->
    <div class="add-form-container" v-if="showEditForm">
      <div class="add-form">
        <h3>编辑菜单</h3>
        <div class="form-group">
          <label>菜单名称:</label>
          <input type="text" v-model="editMenu.menuName" placeholder="请输入菜单名称">
        </div>
        <div class="form-group">
          <label>菜单地址:</label>
          <input type="text" v-model="editMenu.menuUrl" placeholder="请输入菜单地址">
        </div>
        <div class="form-group">
          <label>菜单图标:</label>
          <input type="text" v-model="editMenu.menuIcon" placeholder="请输入菜单图标">
        </div>
        <div class="form-actions">
          <button class="cancel-btn" @click="showEditForm = false">取消</button>
          <button class="submit-btn" @click="updateMenu">保存</button>
        </div>
      </div>
    </div>

    <div class="menu-table">
      <table>
        <thead>
          <tr>
            <th>图标</th>
            <th>菜单名称</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in menuTree" :key="item._id" class="menu-row">
            <td class="icon-cell">{{ item.menuIcon }}</td>
            <td class="name-cell">{{ item.menuName }}</td>
            <td class="action-cell">
              <button class="edit-btn" @click="openEditForm(item)">编辑</button>
              <button class="delete-btn" @click="deleteMenu(item._id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>

      <div v-if="menuTree.length === 0" class="empty-message">
        暂无菜单数据
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      menuTree: [],
      showAddForm: false,
      showEditForm: false,
      newMenu: {
        menuName: '',
        menuUrl: '',
        menuIcon: ''
      },
      editMenu: {
        _id: '',
        menuName: '',
        menuUrl: '',
        menuIcon: ''
      }
    }
  },
  methods: {
    addMenu() {
      if (!this.newMenu.menuName || !this.newMenu.menuUrl || !this.newMenu.menuIcon) {
        alert('请填写完整的菜单信息')
        return
      }

      axios
        .post('http://47.94.6.186:3001/admin/menu', {
          menuName: this.newMenu.menuName,
          menuUrl: this.newMenu.menuUrl,
          menuIcon: this.newMenu.menuIcon
        }, {
          headers: {
            token: localStorage.getItem('loginToken'),
          },
        })
        .then((res) => {
          console.log('添加菜单响应:', res.data)
          alert('添加菜单成功')
          this.showAddForm = false
          this.newMenu = {
            menuName: '',
            menuUrl: '',
            menuIcon: ''
          }
          this.fetchMenuList() // 重新获取菜单列表
        })
        .catch((error) => {
          console.error('添加菜单出错:', error)
          alert('添加菜单出错，请检查网络连接')
        })
    },

    openEditForm(menu) {
      this.editMenu = {
        _id: menu._id,
        menuName: menu.menuName,
        menuUrl: menu.menuUrl,
        menuIcon: menu.menuIcon
      }
      this.showEditForm = true
    },

    updateMenu() {
      if (!this.editMenu.menuName || !this.editMenu.menuUrl || !this.editMenu.menuIcon) {
        alert('请填写完整的菜单信息')
        return
      }

      axios
        .patch(`http://47.94.6.186:3001/admin/menu/${this.editMenu._id}`, {
          menuName: this.editMenu.menuName,
          menuUrl: this.editMenu.menuUrl,
          menuIcon: this.editMenu.menuIcon
        }, {
          headers: {
            token: localStorage.getItem('loginToken'),
          },
        })
        .then((res) => {
          console.log('更新菜单响应:', res.data)
          alert('更新菜单成功')
          this.showEditForm = false
          this.fetchMenuList() // 重新获取菜单列表
        })
        .catch((error) => {
          console.error('更新菜单出错:', error)
          alert('更新菜单出错，请检查网络连接')
        })
    },

    deleteMenu(menuId) {
      if (confirm('确定要删除这个菜单吗？')) {
        axios
          .delete(`http://47.94.6.186:3001/admin/menu/${menuId}`, {
            headers: {
              token: localStorage.getItem('loginToken'),
            },
          })
          .then((res) => {
            console.log('删除菜单响应:', res.data)
            alert('删除菜单成功')
            this.fetchMenuList() // 重新获取菜单列表
          })
          .catch((error) => {
            console.error('删除菜单出错:', error)
            alert('删除菜单出错，请检查网络连接')
          })
      }
    },

    fetchMenuList() {
      axios
        .get('http://47.94.6.186:3001/admin/menu', {
          headers: {
            token: localStorage.getItem('loginToken'),
          },
        })
        .then((res) => {
          console.log(res.data.menuTree)
          this.menuTree = res.data.menuTree
        })
    }
  },
  mounted() {
    this.fetchMenuList()
  },
}
</script>

<style scoped>
.menu-container {
  padding: 20px;
}

.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.menu-header h2 {
  margin: 0;
  color: #333;
  font-size: 24px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.menu-count {
  color: #666;
  font-size: 14px;
}

.add-btn {
  background-color: #1976d2;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.add-btn:hover {
  background-color: #1565c0;
}

/* 添加菜单表单样式 */
.add-form-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.add-form {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.add-form h3 {
  margin: 0 0 20px 0;
  color: #333;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.form-group input:focus {
  outline: none;
  border-color: #1976d2;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.cancel-btn {
  background-color: #9e9e9e;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.cancel-btn:hover {
  background-color: #757575;
}

.submit-btn {
  background-color: #4caf50;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: #45a049;
}

.menu-table {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: #f5f5f5;
}

th {
  padding: 15px;
  text-align: center;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #e0e0e0;
}

tbody tr {
  border-bottom: 1px solid #f0f0f0;
}

tbody tr:hover {
  background-color: #f9f9f9;
}

td {
  padding: 15px;
  color: #555;
}

.icon-cell {
  font-size: 18px;
  text-align: center;
  width: 80px;
}

.name-cell {
  font-weight: 500;
  text-align: center;
}

.action-cell {
  width: 140px;
  text-align: center;
}

.edit-btn {
  background-color: #4caf50;
  color: white;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  margin-right: 5px;
}

.edit-btn:hover {
  background-color: #45a049;
}

.delete-btn {
  background-color: #f44336;
  color: white;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.delete-btn:hover {
  background-color: #d32f2f;
}

.empty-message {
  text-align: center;
  padding: 40px;
  color: #999;
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .menu-container {
    padding: 15px;
  }

  .menu-header {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  th, td {
    padding: 10px 8px;
    font-size: 14px;
  }

  .icon-cell {
    width: 60px;
  }
}
</style>
